<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/js/axios.js" ></script>
    <script src="/js/vue.js" ></script>
    <link href="/el/element.css" rel="stylesheet"  type="text/css"/>
    <script src="/el/element.js"></script>
    <title>blog</title>
</head>

<body>
<!-- 最大的容器 -->
<div id="app">
    <!-- 导航条 -->
    <div th:include= "~{common/menu::menu}"></div>
    <!-- 内容主区域 -->
    <div class="main">
        <!-- 左边菜单栏 -->
        <div class="left">
            <!-- 技术 -->
            <div class="teco">
                <h4>技术改变世界</h4>
                <p><span>申请注册</span>------<span>联系我们</span></p>
                <p><span>排行耪</span>--------<span>联系广告</span></p>
                <p><span>博客列表</span>------<span>写博客</span></p>
                <p><span>提交Bug或建议</span>------<span>登录</span></p>
                <p>&nbsp;&nbsp;&nbsp;<span>==》进入我的博客《==</span></p>
            </div>

            <!-- 宣传语 -->
            <div class="publicize">
                <h4>宣传语</h4>
                <p class="firstchild">发表原创精品文章</p>
                <p>共建精品Java社区</p>
            </div>

            <!-- 网站分类 -->
            <div class="category">
                <h4>根据类型查看博客</h4>
                <p>
                    <el-link v-on:click="findAllBlog()">查看所有的博客</el-link>
                </p>
                <p v-for="item in types">

                    <el-link v-on:click="blogByType(item)">{{item.type}}</el-link>
                </p>
            </div>

        </div>
        <!-- 右边内容显示区域 -->
        <div class="right">
            <!-- 导航条 -->
            <div class="right-content">
                <h6>首页页技术随笔(rss)
                    <i><svg t="1649575822949" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            p-id="24026" width="16" height="16">
                        <path
                                d="M187.52 776.96c-32.64 0-59.52 26.88-59.52 59.52s26.88 59.52 59.52 59.52 59.52-26.88 59.52-59.52-26.88-59.52-59.52-59.52zM128 384v64c247.04 0 448 200.96 448 448h64c0-282.24-229.76-512-512-512zM128 608v64c123.52 0 224 100.48 224 224h64c0-158.72-129.28-288-288-288z"
                                fill="#f89938" p-id="24027"></path>
                        <path d="M128 128v64c388.48 0 704 315.52 704 704h64C896 472.32 551.68 128 128 128z" fill="#f89938" p-id="24028">
                        </path>
                    </svg></i>
                </h6>

                <div class="article" v-for="item in blogs">
                    <h5>{{item.title}}</h5>
                    <aside>
                        {{item.digest}}...<el-link type="primary" v-on:click="read(item.id)">阅读全文</el-link>
                    </aside>
                    <p>
                        <span>{{item.tcreate}}</span>
                        <label>作者：<a href="#">{{item.author}}</a></label>
                        <span>【阅读量:{{item.reading_num}}】</span>
                        <span>【点赞数:{{item.thmub_num}}】</span>
                        <span>
                            <el-button type="primary" :disabled="isDisabled" v-on:click="doSupport(item.id)" v-if="show2==1">点赞</el-button>
                             <el-button type="primary" :disabled="isDisabled" v-on:click="noSupport(item.id)" v-if="show2==2">取消点赞</el-button>
                        </span>

                    </p>
                </div>

            </div>
        </div>



    </div>
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            user:{
                username:'',
                password:'',
                nickname:'',
            },
            login:false,
            register:false,
            types:[],
            type:{},
            blogs:[],
            blog:{},
            isDisabled:false,
        },
        methods:{
            goLogout(){
                localStorage.clear()
                var that = this
                axios({
                    url:"/logout",
                    method:"post",
                    headers:{ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                    params:this.user
                }).then(function (resq) {
                    console.log(resq)
                    top.location.href="/api/public/go2Index"
                })
            },
            read(id){
                console.log(id)
                localStorage.setItem("id",id)
                axios.get("/api/public/addReading_num/"+id).then(
                    function (resq) {
                        console.log(resq.data)
                    }
                )
                top.location.href="/api/public/go2Content";
            },
            doSupport(item) {
                var that = this
                console.log(item)
                //点击一次紧致点击五秒
                this.isDisabled = true;
                setTimeout(() => {
                    this.isDisabled = false
            },5000)
                this.show2=2;

                axios.post("/api/fore/blog/addThmub_num/"+item).then(
                    function (resq) {
                        console.log(resq.data)
                        if(resq.data.code==200){
                            that.$message({
                                showClose: true,
                                offset: 100,
                                message: resq.data.msg,
                                type: 'success'
                            });
                            that.blogs =resq.data.data
                        }
                        if (resq.data.code==500){
                            that.$message({
                                showClose: true,
                                offset: 100,
                                message: resq.data.msg,
                                type: 'warning'
                            });
                        }
                    }
                )
            },
            blogByType(item){
                console.log(item)
                var that=this
                axios.post("/api/public/findBlogInType/"+item.id).then(
                    function (resq) {
                        console.log(resq.data.data)
                        that.blogs=resq.data.data
                    }
                )
            },
            noSupport(item){
                console.log(item)
                this.show2=1;
                var that =this
                axios.post("/api/fore/blog/reduceThmub_num/"+item).then(
                    function (resq) {
                        console.log(resq.data)
                        if(resq.data.code==200){
                            that.$message({
                                showClose: true,
                                offset: 100,
                                message: resq.data.msg,
                                type: 'success'
                            });
                            that.blogs =resq.data.data
                        }
                        if (resq.data.code==500){
                            that.$message({
                                showClose: true,
                                offset: 100,
                                message: resq.data.msg,
                                type: 'warning'
                            });
                        }
                    }
                )
            },
            findAllBlog(){
                var that =this
                axios.get("/api/public/findAllBlog").then(
                    function (resq) {
                        that.blogs=resq.data.data
                        console.log(that.blogs)
                    }
                )
            }

        },
        mounted(){
            var that =this;
            that.show2=localStorage.getItem("show2")
            axios.get("/api/public/findAllType").then(
                function (resq) {
                    console.log(resq.data.data)
                    that.types= resq.data.data
                }
            )
            axios.get("/api/public/findAllBlog").then(
                function (resq) {
                    that.blogs=resq.data.data
                    console.log(that.blogs)
                }
            )

        }
    })
</script>




<style>
    * {
        margin: 0;
        padding: 0;
        font-style: initial;
        font-weight: initial;
        list-style: none;
    }

    /* 导航条logo */
    nav {
        width: 98%;
        height: 60px;
        margin: 10px 1%;
        display: flex;
    }

    .image{
        width: 15%;
        height: 60px;
    }

    .image img{
        width: 100%;
        height: 100%;
    }

    .title{
        width: 85%;
        height: 60px;
        line-height: 60px;
        font-size: 13px;
    }

    .title p{
        text-align: right;
    }

    .title p:last-child{
        margin-right: 15px;
    }

    nav img {
        width: 180px;
        height: 60px;
    }

    /* 内容主区域 */
    .main {
        width: 100%;
        display: flex;
    }

    .main .left {
        width: 20%;
        height: auto;
        border: 1px solid gray;
        text-indent: 5px;
    }

    .left .teco {
        width: 100%;
        height: auto;
        font-size: 15px;
    }

    .left .teco h4,
    .left .publicize h4,
    .left .category h4 {
        width: 100%;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
        color: white;
        font-weight: 400;
        text-align: center;
        background-color: #6b86b3;
    }

    .left .teco p:nth-child(2) , .left .publicize p:nth-child(2) , .left .category p:nth-child(2){
        padding-top: 5px;
    }

    .left .teco p {
        height: 25px;
        line-height: 25px;
        width: 94%;
        cursor: pointer;
        margin: 0 3%;
        border-bottom: 1px dashed gainsboro;
    }

    .left .teco p span {
        color: #6b86b3;
    }

    .left .publicize p {
        color: #5757fc;
        height: 25px;
        line-height: 25px;
        font-weight: 400;
        cursor: pointer;
        font-size: 15px;

    }

    .left .category p {
        color: #6b86b3;
        height: 25px;
        line-height: 25px;
        width: 94%;
        cursor: pointer;
        margin: 0 3%;
        border-bottom: 1px dashed gainsboro;
    }
    .left .category p a{
        text-decoration: none;
        color: #6b86b3;
    }

    /* 右边区域 */
    .main .right {
        width: 79%;
        margin: 0 3px;
        height: auto;
        border-top: 1px solid gray;

    }

    .main .right h6{
        width: 100%;
        height: 30px;
        line-height: 30px;
        text-indent: 0.4rem;
        font-weight: bold;
        background-color: #b6c9e7;
    }

    /* icon图标 */
    .main .right h6 svg{
        display: inline-block;
        padding-top: 5px;
    }

    .main .right h3{
        text-align: right;
        font-weight: initial;
        font-size: initial;
        font-size: 13px;
        height: 25px;
        line-height: 25px;
    }

    .main .right h3 a:last-child{
        display: inline-block;
        margin-right: 8px;
    }

    .main .right .article h5{
        height: 25px;
        line-height: 25px;
        width: 99%;
        margin: 0 0.5%;
        text-indent: 0.4rem;
        background-color: #e5eef7;
        border: none;
        font-size: 15px;
    }

    .main .right .article{
        width: 99%;
        margin: 15px 0.5%;
    }

    .main .right .article aside{
        width: 98%;
        margin: 15px 1%;
        font-size: 13px;
        text-indent: 2rem;
    }

    .main .right .article p{
        text-align: right;
        font-size: 13px;
        margin-bottom: 3px;
        height: 25px;
        line-height: 25px;
    }
    .right-content{
        border: 1px solid gray;
        border-top: none;
    }

    .footer{
        width: 99%;
        height: 15px;
        line-height: 15px;
    }

    .footer p{
        text-indent: 1rem;
        font-size: 13px;
        height: 20px;
        line-height: 20px;
    }

    .footer aside{
        text-align: right;
        font-size: 13px;
        margin: 10px 0;
    }

</style>


</html>